<template>	
	<div style="width: 100%; height: auto;text-align: center;">
		<div style="color: #737373;">
				项目
				<el-select clearable filterable v-model="conditions.projectId"
					@change="loadData()" placeholder="请选择项目">
					<el-option v-for="(project) in projects" :label="project.projectName" :value="project.projectId">
					</el-option> 
				</el-select>
				登记时间
				<el-date-picker type="date" placeholder="选择开始日期" value-format="timestamp" v-model="conditions.startTime" style="width: 20%;"></el-date-picker>
				<el-date-picker type="date" placeholder="选择结束日期" value-format="timestamp" v-model="conditions.endTime" style="width:20%;"></el-date-picker>
				<el-button type="primary" @click="loadData()">查询</el-button>
				<el-button @click="clearQuery()">清空</el-button>
				<el-button @click="exportChart()">导出</el-button>
		</div>
		<div id="chart" style="width: 800px; height: 600px;position: relative;left: 50%;margin-left: -400px;">
			
		</div>
	</div>
</template>

<script>
	
	export default{
		name:"defect-type-ui",
		data(){
			return{
				conditions:{
					projectId: null,
					projectName: null,
					startTime: null,
					endTime: null
				},
				projects:[],
				returnData:[],
				sum:0
			}
		},
		methods:{
			
			pie(){
				//基于dom 创建echarts实例 
				// console.log(document.getElementById("chart"));
				let mychart =this.$echarts.init(document.getElementById("chart"));
				//绘制图表
				mychart.setOption({
					tooltip: {
						trigger: 'item'
					},
					legend: {
					   top: '27%',
					   left: 'right',
					   orient: 'vertical',
					       itemGap: 10, //小图间距
					       itemHeight: 20,//小图高度
					   // padding:[150,10,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
					},
					title:{
						text:"缺陷分类占比",
						left:"center",
						// top:20,
						},
					series:[
						{
						type:'pie',
						radius: ['30%', '65%'],
						avoidLabelOverlap: false,
						
						emphasis: {
						        label: {
						          show: true,
						          fontSize: '20',
						          fontWeight: 'bold'
						        }
						      },
						itemStyle: {
						        borderRadius: 10,
						        borderColor: '#fff',
						        borderWidth: 2
						      },
						label: {
						        show: false,
						        position: 'center'
						      },	
						labelLine: {
							show: false
						},
						data:this.returnData,
						}
					]
				});
			},
			//导出图表
			exportChart(){
				alert("1")
				var chart= this.$echarts.init(document.getElementById("chart"));
				var result=chart.getDataURL({
					type:'png',
					pexelRatio:2,
					backgroundColor:'#fff'
				})
				console.log(result)
				var $a =document.createElement('pie');
				$a.setAttribute("href",result);
				$a.setAttribute("download","");
				$a.click();
				console.log($a)
			},
			//清空
			clearQuery(){
				this.conditions.projectId=null;
				this.conditions.startTime=null;
				this.conditions.endTime=null;
				this.loadData();
			},
			showInfo(row){
				this.dialogInfoVisible=true;
				this.showInfoData=row;
			},
			getDate(dateString) {
				return new Date(dateString).toLocaleDateString();
			},
			getTime(dateString){
				let date = new Date(dateString);
				return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
			},
			formatDate(row, column, cellValue) {
				return cellValue > 0 ? this.getDate(cellValue)+" "+this.getTime(cellValue) : '';
			},
			loadProject(){
				this.$http.get("/project/queryAllPro").then(resp=>{
					console.log(resp.data)
					if(resp.data.statusCode==200){
						this.projects=resp.data.data;
					}else{
						this.projects=[];
					}
				})
			},
			loadData(){
				this.$http.post("/defectInfo/findStatisticsByType",this.conditions).then(resp=>{
					if(resp.data.statusCode==200){
						this.returnData=resp.data.data;
						this.sum=0;
						for(let index in this.returnData){
							this.sum=this.sum+this.returnData[index].value;
						}
						for(let index in this.returnData){
							let data =  this.returnData[index];
							this.returnData[index].name=data.name+"("+((data.value/this.sum)*100).toFixed(2)+"%)";
						}
						this.pie();
					}
				})
			}
		},
		created(){
			this.loadProject();
		},
		mounted() {
			this.loadData();
		}
	}
</script>

<style>
</style>